<script setup>
import { ElSpace } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import CustomModal from "@/components/CustomModal";
import { transformNumber, toPercent } from "@/hooks/useCommon";
import { ref, computed, watchEffect, onMounted } from "vue";
import CustomTable from "@/components/CustomTable";
import { equityInvestPlannedAmountChangeRecord } from "@/api/investPaper/";
const props = defineProps({
  init: { type: Object, default: () => ({}) },
  visible: { type: Boolean, default: false },
});
const emit = defineEmits(["update:visible", "finish"]);
const open = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit("update:visible", val);
  },
});

const columns = [
  {
    label: "项目名称",
    prop: "equityProjectName",
    minWidth: 150,
  },
  {
    label: "2024年拟投额(调整前)",
    prop: "oriValue",
    minWidth: 120,
    formatter: (t, r) => transformNumber(r.oriValue),
  },
  {
    label: "调整金额",
    prop: "changedValue",
    minWidth: 80,
    formatter: (t, r) => transformNumber(r.changedValue),
  },
  {
    label: "调整差额/调整率",
    prop: "itemName",
    minWidth: 120,
    formatter: (t, r) =>
      r.createUserName
        ? `${transformNumber(r.changedValue - r.oriValue)}/${
            r.oriValue
              ? toPercent(r.changedValue - r.oriValue, r.oriValue, 2)
              : "-"
          }`
        : "-",
  },
  {
    label: "操作人",
    prop: "createUserName",
    minWidth: 80,
  },
  {
    label: "操作时间",
    prop: "createTime",
    minWidth: 100,
  },
];
const dataSource = ref([]);
const loading = ref(false);
const projectNameSearch = ref("");
const getList = async () => {
  loading.value = true;
  const { data, code } = await equityInvestPlannedAmountChangeRecord({
    projectNameSearch: projectNameSearch.value,
    projectId: props.init.equityProjectId,
  }).finally(() => (loading.value = false));

  if (!code == "200") return;
  dataSource.value = data;
};
const handleBlur = () => {
  getList();
};
watchEffect(() => open.value && getList());
</script>

<template>
  <CustomModal
    width="70%"
    teleport="#app"
    :title="'计划调整记录'"
    v-model:visible="open"
    :footerButton="false"
  >
    <br />
    <el-space>
      <el-input
        v-model="projectNameSearch"
        style="width: 240px"
        placeholder="项目名称搜索"
        :suffix-icon="Search"
        @input="handleBlur"
    /></el-space>
    <div style="height: 10px" />
    <CustomTable
      :height="dataSource?.length > 4 ? '60vh' : '100%'"
      v-loading="loading"
      border
      style="width: 100%"
      :tableData="dataSource"
      :tableOption.sync="columns"
      :isPaging="false"
    >
    </CustomTable>
  </CustomModal>
</template>

<style scoped lang="scss"></style>
